@model FabrikamFiber.DAL.Models.ServiceTicket
<link rel="stylesheet" type="text/css" href="@Url.Content("~/Content/jquery.cleditor.css")" />

<script src="@Url.Content("~/Scripts/jquery.uitablefilter.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.cleditor.min.js")" type="text/javascript"></script>

@if (false)
{ 
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
}

@* This partial view defines form fields that will appear when creating and editing entities *@

<div class="editor-label">
    @Html.LabelFor(model => model.Title)
</div>
<div class="editor-field">
    @Html.TextBoxFor(model => model.Title, new { style = "width:500px" })
    @Html.ValidationMessageFor(model => model.Title)
</div>

<div class="editor-label">
    @Html.LabelFor(model => model.EscalationLevel)
</div>
<div class="editor-field">
    @Html.DropDownListFor(model => model.EscalationLevel, new SelectList(ViewBag.PossibleEscalationLevels, "Key", "Value"))
    @Html.ValidationMessageFor(model => model.EscalationLevel)
</div>

<div class="editor-label">
    @Html.LabelFor(model => model.Description)
</div>
<div class="editor-field">
    @Html.TextAreaFor(model => model.Description)
    @Html.ValidationMessageFor(model => model.Description)
</div>

<div class="editor-label">
    Customer
</div>

@Html.HiddenFor(model => model.Opened)
@Html.HiddenFor(model => model.CreatedByID)
@Html.HiddenFor(model => model.AssignedToID)
@Html.HiddenFor(model => model.StatusValue)

<div class="editor-field">
    @Html.HiddenFor(model => model.CustomerID)
    <a href="#" id="openCustomerDialog">
    <div id="CustomerFullName">
    @if (Model == null || Model.Customer == null)
    { 
        <text>Select...</text>
    }
    else
    {
        @Model.Customer.FullName
    }
    </div></a>
</div>

<div class="editor-label">CreatedBy</div>
<div class="editor-field">@(Model.CreatedBy == null ? "None" : Model.CreatedBy.FullName)</div>

<div id="customerDialog" class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable">
    <div style="margin-left:20px;"><strong>Search:</strong> <input type="text" style="width:200px" name="search-customer" id="search-customer" /><br/></div>
    <div style="height: 400px; min-height: 109px; width: auto;" class="ui-dialog-content ui-widget-content" id="dialog">
        
        <table class="customer-list" style="border:0px;">
        @foreach (var customer in ViewBag.PossibleCustomers)
        { 
            <tr><td style="border:0px;"><a href="#" class="selectCustomer" data-id="@customer.ID" data-fullname="@customer.FullName">@customer.FullName</a></td></tr>
        }
        </table>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        var $dialog = $('#customerDialog').dialog({
            autoOpen: false,
            title: 'Select Customer',
            width: 400,
            height: 300
        });

        $("#search-customer").keyup(function () {
            $.uiTableFilter($("table.customer-list"), this.value);
        });

        $('#openCustomerDialog').click(function () {
            $dialog.dialog('open');
            // prevent the default action, e.g., following a link
            return false;
        });

        $(".selectCustomer").click(function () {
            $dialog.dialog('close');

            $('#CustomerID').attr('value', $(this).data('id'));
            $('#CustomerFullName').text($(this).data('fullname'));

            return false;
        });

        $("#Description").cleditor({
            width: 500, // width not including margins, borders or padding
            height: 250, // height not including margins, borders or padding          
            controls:     // controls to add to the toolbar                        
                  "bold italic underline strikethrough subscript superscript | font size " +
                  "style | color highlight removeformat | bullets numbering | outdent " +
                  "indent | alignleft center alignright justify | undo redo | " +
                  "rule image link unlink | cut copy paste pastetext | print source",
            colors:       // colors in the color popup                        
                  "FFF FCC FC9 FF9 FFC 9F9 9FF CFF CCF FCF " +
                  "CCC F66 F96 FF6 FF3 6F9 3FF 6FF 99F F9F " +
                  "BBB F00 F90 FC6 FF0 3F3 6CC 3CF 66C C6C " +
                  "999 C00 F60 FC3 FC0 3C0 0CC 36F 63F C3C " +
                  "666 900 C60 C93 990 090 399 33F 60C 939 " +
                  "333 600 930 963 660 060 366 009 339 636 " +
                  "000 300 630 633 330 030 033 006 309 303",
            fonts:        // font names in the font popup                        
                  "Arial,Arial Black,Comic Sans MS,Courier New,Narrow,Garamond," +
                  "Georgia,Impact,Sans Serif,Serif,Tahoma,Trebuchet MS,Verdana",
            sizes:        // sizes in the font size popup                        
                  "1,2,3,4,5,6,7",
            styles:       // styles in the style popup                        
                  [["Paragraph", "<p>"], ["Header 1", "<h1>"], ["Header 2", "<h2>"],
                  ["Header 3", "<h3>"], ["Header 4", "<h4>"], ["Header 5", "<h5>"],
                  ["Header 6", "<h6>"]],
            useCSS: false, // use CSS to style HTML when possible (not supported in ie)          
            docType:      // Document type contained within the editor                        
                  '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">',
            docCSSFile:   // CSS file used to style the document contained within the editor                        
                  "",
            bodyStyle:    // style to assign to document body contained within the editor                        
                  "margin:4px; font:10pt Arial,Verdana; cursor:text"

        });
    });
</script>
